<template>
    <div class="_stardiv" :style="`width:${props.width};height:${props.height}`">
        <input type="checkbox" name="" id="_starcheck" @click="clickevent">
        <div v-for="item in 30" :key="item" class="_year"></div>
        <svg class="_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
            <path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path>
        </svg>
    </div>
</template>

<script setup>
const emit = defineEmits(['clickEvent']);
const props = defineProps({
    color: {
        type: [String],
        default: 'black'
    },
    width: {
        type: [String],
        default: '19px'
    },
    height: {
        type: [String],
        default: '19px'
    },
})
let _color = computed({
    get: () => {
        return props.color
    },
})
let clickevent = () => {
    emit('clickEvent')
}
</script>

<style lang="scss" scoped>
._stardiv {
    position: relative;
    transform-style: preserve-3d;
    // perspective: 1000;
    #_starcheck {
        cursor: pointer;
        width: 100%;
        height: 100%;
        position: absolute;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        z-index: 111;
        &:checked ~ ._year {
            animation: yearTransform 2s ease-out backwards;
        }
        &:checked ~ ._svg {
            color: red;
        }
    }

    @for $y from 1 through 30 {
        & > ._year:nth-child(#{$y}) {
            background-color: rgb(random(255), random(255), random(255));
            --t: translateX(#{(random(100) - 50) * 1px})
                translateY(#{(random(50) - 60) * 1px})
                translateZ(#{(random(100) - 50) * 1px})
                rotateX(#{random(720)}deg)
                rotateY(#{random(720)}deg)
                rotateZ(#{random(720)}deg)
                scale(0);
        }
    }

    & > ._year {
        z-index: 100;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        //background-color: var(--theme-color);
        width: 5px;
        height: 5px;
    }
    @keyframes yearTransform {
        0% {
            transform: scale(0);
        }
        25% {
            transform: none;
        }
        100% {
            transform: var(--t);
        }
    }
    & > ._svg {
        z-index: 101;
        position: absolute;
        width: 100%;
        height: 100%;
        color: v-bind(_color);
    }
}
</style> 